<template>
<view>
<block v-for="(item,index) in list" :key="item.id">
	<!-- 为了滑动删除的时候，操作的是当前的list容器，不是所有的active都都改变，变active给list数组的每一项添加属性 -->
	<view :data-index="index" class="list"	:class="[item.active?'touch-move':'']"
	@touchstart="touchStart" @touchmove="touchMove">
		<view class="item">
			<view class="circle">
				<icon type="success" @click="selectedList" :data-index="index" v-if="item.isSeleted" color="#43bf92"></icon>
				<icon type="circle" @click="selectedList" :data-index="index" v-else color="#999"></icon>
			</view>
			<view class="img">
				<image :src="item.pic"></image>
			</view>
			<view class="content">
				<view class="title">{{item.name}}</view>
				<view class="desc">{{item.info}}</view>
				<view class="bottom">
					<text class="money">￥{{item.price}}</text>
					<view class="edit" >
						<text class="reduce" @click="reduce" :data-index="index">-</text>
						<text class="num">{{item.num}}</text>
						<text class="add" @click="add" :data-index="index">+</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="delete" :data-index="index" @click='del'>删除</view>
	</view>
</block>
	<!-- 占位 -->
	<view class="gao"></view>
	<!-- 全选布局 -->
	<view class="myCart-bottom">
		<view class="selectedAll">
			<icon type='success' @click="seletedAll" v-if="isSeletedAll" color="#43bf92"></icon>
			<icon type='circle' @click="seletedAll"  v-else color="#999"></icon>
			<text>全选</text>
		</view>
		<view class="heji">合计:<text>{{totalPrice}}</text></view>
		<view class="jiesuan {num>0?'acitveAll':''}"> 结算:{{totalPrice}}</view>
	</view>
</view>
</template>
<script>
	export default {
		data(){
			return{
				active:false,
				isSeletedAll:false,//全选的状态
				startX:'',//开始的位置点做坐标
				list:[],//购物车列表信息
				num:0,//选中的个数  num>0控制结算的状态颜色
				totalPrice:'0.00',//总价格
				isShow:false,//控制结算的状态颜色
			}	
		},
		// onLoad:function(options){
		// 	//获取数据
		// 	// this.getShop();//只执行一次
		// 	},
		//页面一加载进来就显示购物车变化的数据
	onShow(){
			this.getShop();
			//从缓存中读取的数据
			let userInfo = this.$mp.query.userInfo||wx.getStorageSync('userInfo')
			//判断数据是否存在
			if(userInfo){
			return
				}else{
					wx.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
		
		methods:{
			//点击出现删除
			demo(){
				this.active=!this.active
			},
			// // 滑动出现删除
			touchStart(e){
				// console.log(e)
				//startX开始位置
				// console.log('startX开始位置',e.touches[0].clientX)
				this.startX = e.changedTouches[0].clientX
			},
			//移动事件
			touchMove(e){
				// console.log("move",e.touches[0])
				//每一个元素list都有一个标识，滑动谁获取的是哪一个list里面的item
			let index = e.currentTarget.dataset.index;
				// console.log('滑动的是第几个元素',index);
				let list = this.list;//获取购车列表容器
				let startX = this.startX;
				let moveX = e.changedTouches[0].clientX;
				if(moveX < startX){//左滑
					list[index].active = true;//给当前的 元素赋值属性true
					// console.log('滑动的是第几个元素',index);
				}else {
					list[index].active = false;
				}
				//修改当前的list后===同步更新数据data里面的变量list
				this.list = list 
			},
			//获取购物车数据
			getShop(){
				let isSeletedAll = this.isSeletedAll;
				wx.request({
					url:'http://iwenwiki.com:3002/api/cart/list',
					success:res=>{
						//打印购物车数据
						// console.log(res.data)
						if(res.data.status==200){
							// console.log(res.data.data.result)
							//进入页面判断全选是否选中： 选中---所有的list列表都选中 ，否则不选中
							if(isSeletedAll){
								let list = res.data.data.result;
								for(let i=0;i<list.length;i++){
									list[i].isSeleted = true;
								}
								this.list = list;
							}else {
								this.list=res.data.data.result
							}
						}else{
							console.log('购物车没有数据')
						}
					}
				})
			},
			//点击选中元素
			//3.1 点击选中 再点击取消 3.2 点击操作的 当前的元素 3.3 统计个数全选 3.4 控制结算高亮 ---至少有一个选中
			selectedList:function(e){
				let index = e.currentTarget.dataset.index;
				let list = this.list;
				let num = this.num;//个数
				//切换当前的元素的选中状态 ，点击取反之前的内容
				list[index].isSeleted = !list[index].isSeleted;
				//全选  --1，当前所有的选中的就是全选 num++ num ==list.length  2,有一个不选中就是 不是全选 控制变量num数量
				if(list[index].isSeleted){//选中
					num++;
				}else{
					num--;
				}
				console.log('目前选中的个数',num);
				//全选==num++ num 的总长度等于所有对的list长度的时候
				if(num==list.length){
					this.isSeletedAll=true
				}else{
					this.isSeletedAll=false
				}
				this.list=list
				this.num = num 
				//获取价格方法
				this.gototalPrice();
			},
			//计算价格
			gototalPrice(){
				let list = this.list
				let sum = 0;//总价格
				//遍历list容器获取选中的内容==
				for(let i = 0;i<list.length;i++){
					//list[i].isSeleted 是否选中 true选中
					if(list[i].isSeleted){
						sum += list[i].price*list[i].num;
					}
				}
				this.totalPrice=sum.toFixed(2)
			},
			//点击全选
			seletedAll(){
				//获取全选按钮之前的状态取反
				let isSeletedAll = !this.isSeletedAll;
				//获取list
				let list = this.list;
				let num = this.num;
				//控制所有的list的每一项是否选中
				for(let i=0;i<list.length;i++){
					list[i].isSeleted = isSeletedAll;
				}
				if(isSeletedAll){//全选
					num = list.length;
				}else{
					num = 0;
					this.isSeletedAll = false;
				}
				//更新数据
				this.list = list;
				this.isSeletedAll = isSeletedAll;
				this.num = num ;
				//价格
				this.gototalPrice()
			},
			//点击++ 修改购物车商品数量==================================
			add(e){
				let list = this.list;
				let index = e.currentTarget.dataset.index;
				// console.log(index)
				//获取当前的元素的目前的数量
				let num =list[index].num;
				//点击+号num++提交后台接口
				num++;
				// console.log('增加的属性',num);
				list[index].num = num;
				wx.request({
					url:'http://iwenwiki.com:3002/api/cart/update',
					data:{
						id:list[index].id,
						num:num
					},
					success:res=>{
						// console.log(res.data);
						if(res.data.staus==200){
							this.list = list
						}
					}
				})
				// 获取总的价格
				this.gototalPrice()
			},
			//修改购物车数量
			reduce(e){
			  //1.获取当前的操作的元素   2.获取列表容器list 
			  var list=this.list;
			  var index=e.currentTarget.dataset.index;
			
			  //获取当前的元素的目前的数量
			  var num=list[index].num;
			  num--;
			  if(num<1){
			    wx.showToast({
			      title: '数量最少为1',
			      icon:'none'
			    })
			    return;
			  }
			  //修改
			  console.log('减少后的属性',num);
			    list[index].num=num;
			    //3.请求接口
			    wx.request({
			      url: 'http://iwenwiki.com:3002/api/cart/update',
			      data:{
			        id:list[index].id,
			        num:num
			      },
			      success:res=>{
			        console.log(res.data);
			        if(res.data.status==200){//修改 数量
			          this.list=list
			         
			        }
			      }
			    })
			    // 获取总的价格
			    this.gototalPrice()
			
			},
			//删除
			del(e){
			    var index=e.currentTarget.dataset.index;
			    var list=this.list;
			
			    //执行删除---接口
			    wx.request({
			      url: 'http://iwenwiki.com:3002/api/cart/delete',
			      data:{
			        id:list[index].id
			      },
			      success:res=>{
			        console.log(res.data);
			        if(res.data.status==200){
			          wx.showToast({
			            title: '删除成功',
			            icon:'none'
			          })
			          //界面：数据消失-----
			          //直接删除本地的数据data里面的list容器 对应的这个数据 
			          list.splice(index,1);//删除 splice(index下标,1删除个数)
			          //修改list 
			          this.list=list
			          
			
			          // //获取价格：
			          this.gototalPrice();
			        }
			      }
			    })
			
			}
		},
		
	}
</script>
<style >
/*  购物车容器布局===左侧内容--右侧删除*/
.list{
  background: #fff;
 display: flex;
 width: 100%;
  margin-top: 20rpx;
 justify-content: space-between;
 overflow: hidden;
}
/* 左侧的内容容器布局 */
.item{
  width: 100%;
   margin-left: -90px;
  transform: translateX(90px);
  transition: all 0.4s; 
  display: flex;
  padding: 10rpx;
}
.delete{
  width: 90px;
  background: red;
  color: #fff;
  text-align: center;
  /* 动画 */
  transition: all 0.4s;
  transform: translateX(90px);
  display: flex;
  align-items: center;
  justify-content: center; 
}
/* 动画 */
.touch-move .item,.touch-move .delete{
  transform: translateX(0);
}


.circle{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 10rpx;
}

/* 图片 */
.img image{
  width: 180rpx;
  height: 180rpx;
}
.img{
  padding-right: 20rpx;
}
.title{
  margin-bottom: 10rpx;
}
.desc{
  color: #666;
  font-size: 28rpx;
  line-height: 36rpx;
  /* 省略 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
}
.content{
  position: relative;
  flex:1;
}
.bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 26rpx;
  display: flex;
}
.money{
  color: red;
  margin-right: 40rpx;
}

.edit{
 margin-top:-6rpx;
}
.num{
  padding-right: 10rpx;
  padding-left: 10rpx;
}
.reduce{
  border:1rpx solid #999;
  padding:4rpx 10rpx;
}
.add{
  background: #333;
  color: #fff;
  padding:4rpx 10rpx;
}



.gao{
  height: 100rpx;
}

/* 合计 */
.myCart-bottom{
  position: fixed;
  bottom: 0;
  background: #fff;
  display: flex;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  align-items: center;

}
.selectedAll{
  flex: 1;
  display: flex;
  align-items: center;
  vertical-align: middle;
  padding-left: 10rpx;
}
.selectedAll icon{
  width: 23px;
  height: 23px;
  margin-right: 6rpx;
}

.heji{
  padding-right: 20rpx;
  font-size: 26rpx;
}
.heji text{
  color:  #43bf92;
}
.jiesuan{
  /* background: #43bf92; */
  background: #999;
  color: #fff;
  padding-right: 10rpx;
  padding-left: 10rpx;
}
.acitveAll{
  background: #43bf92;
}
</style>